<template>
  <div class="newsDetails">
    <Header :fixed="true">
      <van-icon name="arrow-left" slot="left" />
      <div slot="title">总结报告公告详情</div>
      <van-icon name="like" slot="right" v-if="!msg" @click.native="getInsert" :style="{'color': data.isCollection == 'true' ? '#d0393f': ''}" />
    </Header>
    <div class="newsDetails-box" v-if="msg">
      <div class="tit">您没有权限查看哦！</div>
    </div>
    <div class="newsDetails-box" v-else>
      <div class="tit">{{ data.title }}</div>
      <div class="content" v-html="data.content"></div>
      <div class="yj-btn">
        <van-button type="info" round size="large" @click="toUp">上传总结报告</van-button>
        <van-button type="info" round size="large" v-if="feedBack.attachment" class="btn" @click="toDetails">查看总结报告详情</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/Header'
import { getReviewFeedDetail, insert, remove, ChangeToRead } from '@/api/home'
export default {
  name: 'psyjDetails',
  data () {
    return {
      data: {},
      msg: false,
      feedBack: {}
    }
  },
  components: {
    Header
  },
  mounted () {
    
  },
  watch: {
    
  },
  mounted () {
    this.getData()
  },
  methods: {
    async getData () {
      let { data } = await getReviewFeedDetail({userId: this.$store.state.user.userId, id: this.$route.query.id})
      if (data.result == 'suc') {
        if (data.data == '您没有查看权限哦！') {
          this.msg = true
        } else {
          this.data = data.data.feed
          this.feedBack = data.data.feedBack
        }
      }
    },
    async getInsert () {
      if (this.data.isCollection == 'false') {
        let { data } = await insert({userId: this.$store.state.user.userId, type: '4', contentId: this.data.id})
        if (data.result == 'suc') {
            this.$toast('收藏成功！');
            this.getData()
        } 
      } else {
        let { data } = await remove({userId: this.$store.state.user.userId, id: this.data.id})
        if (data.result == 'suc') {
            this.$toast('已取消收藏！');
            this.getData()
        } 
      }
    },
    async roRead () {
      if (this.data.isJoin == 'true') {
        this.$toast('此公告为已读状态！');
        return
      }
      let { data } = await ChangeToRead({userId: this.$store.state.user.userId, id: this.data.id})
      if (data.result == 'suc') {
          this.$toast('已设置为已读！');
          this.getData()
      }    
    },
    toDetails () {
        this.$router.push({path: '/zjbgdet', query: {id: this.data.id}})
    },
    toUp () {
      if (JSON.stringify(this.feedBack) !== "{}") {
        this.$toast('已上传过总结报告！');
      } else {
        this.$router.push({path: '/up1', query: {id: this.data.id, t: 2}})
        
      }
        
    }
  }
}
</script>

<style lang="less">
@import '~@/assets/css/index.less';
.newsDetails {
  min-height: 100vh;
}
.newsDetails-box {
  padding-top: 70px;
  .tit {
    padding: 12px 0 16px 0;
    font-size: @big-size;
    font-weight: 600;
    text-align: center;
  }
  .content {
    font-size: @normal-size;
    padding: 0 16px;
    img {
      width: 100% !important;
      height: auto !important;
    }
  }
  .yj-btn {
    padding: 28px 20% 28px 20%;
    .btn {
        margin-top: 16px;
    }
  }
}
</style>